<!--
 * @Description: 使用 https://www.swiper.com.cn/demo/index.html#virtual-slides
 * API: https://www.swiper.com.cn/api/virtual/374.html
 * vue 使用: https://swiperjs.com/vue
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-02-07 10:07:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-12-03 11:46:13
-->
<template>
  <div class="winningRecordSwipe">
    <!-- 表头 -->
    <div class="header items-center">
      <div class="header-text header-first">{{ $t("lotteryMoney.user") }}</div>
      <div class="header-text header-second">
        {{ $t("lotteryMoney.tableZj") }}
      </div>
      <div class="header-text header-third">
        {{ $t("lotteryMoney.tableSl") }}
      </div>
      <div class="header-text header-fourth">
        {{ $t("lotteryMoney.tableJj") }}
      </div>
    </div>
    <!-- 轮播 -->
    <template v-if="slides.length > 0 && lotteryStore.activityCurStatus == 2">
      <div v-for="(item, index) in slides" :key="item.idsid">
        <div
          v-if="index < slidesMax"
          class="item-animation item-bg-flex"
          :class="{
            'item-bg': index == 0,
          }"
        >
          <div class="item items-center">
            <!-- 头像昵称 -->
            <div class="header-first items-center">
              <ImgNuxt
                class="item-avatar"
                isHttp
                :placeholder="file.avatarDefault"
                :src="item.avatar || file.avatarDefault"
              />
              <div v-if="item.nickname" class="item-nickname">
                {{
                  item.nickname.length > 6
                    ? `${item.nickname.substring(
                        0,
                        3
                      )}..${item.nickname.substring(
                        item.nickname.length - 3,
                        item.nickname.length
                      )}`
                    : item.nickname
                }}
              </div>
              <div v-else class="item-nickname">--</div>
            </div>
            <!-- 一/二等奖 -->
            <div class="header-second">
              <img
                v-if="item.prizeLevel == 1"
                class="item-prize"
                src="/image/lottery-v3/prize-1-icon.svg"
              />
              <img
                v-else-if="item.prizeLevel == 2"
                class="item-prize"
                src="/image/lottery-v3/prize-2-icon.svg"
              />
            </div>
            <!-- 数量 -->
            <div class="item-xxz header-third">
              {{ item.drawCount }} {{ $t("lotteryMoney.xxz") }}
            </div>
            <!-- 奖金 -->
            <div class="header-fourth item-amount">
              $
              {{
                toThousands(
                  decimalToLength(
                    new Decimal(
                      item.prizeLevel == 1
                        ? lotteryStore.firstPrizeBonus
                        : item.prizeLevel == 2
                        ? lotteryStore.secondPrizeBonus
                        : 0
                    )
                      .mul(item.drawCount)
                      .div(1000)
                      .toString()
                  )
                )
              }}
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 空数据 -->
    <div v-else class="notdata items-center">
      <!-- 无数据 -->
      <template v-if="lotteryStore.activityCurStatus == 2">
        <img
          v-if="!lotteryStore.isFri"
          class="notdata-img"
          src="/image/lotterymoney/zwsj-icon.svg"
        />
        <img
          v-else
          class="notdata-img"
          src="/image/lottery-v3/zwsj1-icon.svg"
        />
        <div class="notdata-text">
          {{ $t("lotteryMoney.zwsj") }}
        </div>
      </template>
      <!-- 未开始 -->
      <template v-else-if="lotteryStore.activityCurStatus < 2">
        <img
          v-if="!lotteryStore.isFri"
          class="notdata-img"
          src="/image/lottery-v3/wks-icon.svg"
        />
        <img v-else class="notdata-img" src="/image/lottery-v3/wks1-icon.svg" />
        <div class="notdata-text">
          {{ $t("lotteryMoney.wks") }}
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts" name="winningRecordSwipe">
import { onMounted } from "vue";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";
import Decimal from "decimal.js";

const emit = defineEmits(["initDone", "update:centerindex", "change"]);

const lotteryStore = useLotteryV3Store();

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// 列表数据
const slides: any = ref([]);
// 最多渲染
const slidesMax = 5;
// 活动不是进行中,数据重置
const activityCurStatus_watch = watch(
  () => lotteryStore.activityCurStatus,
  (newVal, oldVal) => {
    if (newVal != 2) {
      slides.value = [];
    }
  }
);

// 监听 stroe  数据变化,如有变化就更新
const recentPrizeRecordList_watch = watch(
  () => lotteryStore.$state.recentPrizeRecordList,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      if (lotteryStore.activityCurStatus == 2) {
        slides.value = newVal.slice(0, 5);
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {});
onBeforeUnmount(() => {
  activityCurStatus_watch && activityCurStatus_watch();
  recentPrizeRecordList_watch && recentPrizeRecordList_watch();
});
</script>
<style lang="scss" scoped>
.item-animation {
  transition: all 0.5s;
}

.winningRecordSwipe {
  width: 100%;
  // padding-bottom: 5 * 2px;
}

.notdata {
  min-height: 118 * 2px;
  flex-direction: column;
  justify-content: center;
  &-text {
    text-align: center;
    font-size: 14 * 2px;
    color: #999da7;
  }
  &-img {
    margin-bottom: 8 * 2px;
    width: 50 * 2px;
  }
}

.header {
  padding: 6 * 2px 10 * 2px;
  background-color: #f0f3fa;
  justify-content: space-between;
  border-top-left-radius: 4 * 2px;
  border-top-right-radius: 4 * 2px;
  &-text {
    color: #999da7;
    font-size: 11 * 2px;
    font-weight: 400;
  }
  &-first {
    width: 120 * 2px;
  }
  &-second {
    width: 90 * 2px;
  }
  &-third {
    width: calc(100% - 120 * 2px - 90 * 2px - 80 * 2px);
    white-space: nowrap;
    margin: 0 6 * 2px;
  }
  &-fourth {
    white-space: nowrap;
    text-align: right;
    min-width: 80 * 2px;
    flex: 1;
  }
}
.item {
  position: relative;
  justify-content: space-between;
  width: 100%;
  padding: 0 10 * 2px;

  &-bg {
    border-radius: 0px 0px 8 * 2px 8 * 2px;
    background: linear-gradient(90deg, #d6f3ff 0%, #d6eaff 100%);

    &-flex {
      display: flex !important;
      align-items: center;
      padding: 5.2 * 2px 0;
    }
  }

  &-avatar {
    width: 18 * 2px;
    height: 18 * 2px;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: 4 * 2px;
  }
  &-nickname {
    width: calc(100% - 25 * 2px);
    color: #141924;
    font-size: 12 * 2px;
    font-weight: 400;
  }

  &-xxz {
    color: #141924;
    font-size: 12 * 2px;
    font-weight: 400;
  }

  &-amount {
    color: #007bff;
    font-size: 12 * 2px;
    font-weight: 510;
  }

  &-prize {
    width: 20 * 2px;
    height: 20 * 2px;
  }
}
</style>
